
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="lib/jquery.js"></script>
	<script type="text/javascript" src="js/chart.js"></script>
	<style type="text/css">
		#div1 {
			width: 800px;
			height: 450px;
			border: solid 1px red;
		}
		#div2, #div3, #div4{
			width: 100px;
			height: 100px;
		}

	</style>
	<script>
		window.onload = function () {
			console.time('time1');

			var ele = document.getElementById('div1');

			var canvas = new Chart.Canvas(ele);	// 此处的 canvas 没有具体的作用
			// console.log(canvas);
			
			var pie = new Chart.Pie({'三星':16, '苹果':27,'华为':20,'小米':22,'oppo':18,'诺基亚':3,'vivo':25, 'HTC':3, '多普达':5, 'Google':8, '摩托罗拉':12});
			var set = {
				x:200,
				y:200,
				r:150,
				r1:60,
				unit:'台',
				stroke_width:5,
				randomColor:false
			};
			pie.setAttr(set);
			pie.draw();
			pie.getText();

			console.timeEnd('time1');
			

			var color = new Chart.Colors();
			console.log(pie);
			var c = color.randomColor();
			var l = color.lightColor(c);
			var d = color.drakColor(c);
			

			$('#div2').css('background-color', l);
			$('#div3').css('background-color', c);
			$('#div4').css('background-color', d);

		};
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<div id="div4"></div>
</body>
</html>